import React from "react";
import {
  Carousel,
  SideMenu,
  ProductCollection,
  Partner,
} from "../../components";
import { connect } from "react-redux";
import { Row, Col, Typography, Spin } from "antd";
// import { productList1, productList2, productList3 } from "./mockups";
import sideImage from "../../assets/images/sider_2019_12-09.png";
import sideImage2 from "../../assets/images/sider_2019_02-04.png";
import sideImage3 from "../../assets/images/sider_2019_02-04-2.png";
// import styles from "./HomePage.module.css";
import { MainLayout } from "../../layouts/mainLayout";
import { giveMeDataActionCreator } from "../../redux/recommendProduct/productAction";
import { withTranslation, WithTranslation } from "react-i18next";
type PropsType = WithTranslation &
  ReturnType<typeof mapStateToProps> &
  ReturnType<typeof mapDispatchToProps>;

interface State {
  loading: boolean;
  error: string | null;
  productList: any[];
}
//自己的数据外来的
class HomePageCmoponent extends React.Component<PropsType, State> {
  // async componentDidMount() {
  //   const { data } = await axios.get(
  //     "http://123.56.149.216:8080/api/productCollections"
  //   );
  //   console.log(data);
  // }
  componentDidMount() {
    this.props.giveMeData();
  }
  render() {
    const t = this.props.t;
    console.log(this.props);
    const { loading, error, productList } = this.props;
    return (
      <div>
        {loading ? (
          <Spin
            size="large"
            style={{
              marginTop: 200,
              marginBottom: 200,
              marginLeft: "auto",
              marginRight: "auto",
              width: "100%",
            }}
          />
        ) : error ? (
          <div>{error}</div>
        ) : (
          <MainLayout>
            <Row style={{ marginTop: 20 }}>
              <Col span={6}>
                <SideMenu />
              </Col>
              <Col span={18}>
                <Carousel />
              </Col>
            </Row>
            <ProductCollection
              title={
                <Typography.Title level={3} type="warning">
                  {t("home_page.hot_recommended")}
                </Typography.Title>
              }
              sideImage={sideImage}
              products={productList[0].touristRoutes}
            />
            <ProductCollection
              title={
                <Typography.Title level={3} type="danger">
                  {t("home_page.new_arrival")}
                </Typography.Title>
              }
              sideImage={sideImage2}
              products={productList[1].touristRoutes}
            />
            <ProductCollection
              title={
                <Typography.Title level={3} type="success">
                  {t("home_page.domestic_travel")}
                </Typography.Title>
              }
              sideImage={sideImage3}
              products={productList[2].touristRoutes}
            />
            <Partner />
          </MainLayout>
        )}
      </div>
    );

    // return (
    //   if (loading) {
    //     return (
    //       <Spin
    //         size="large"
    //         style={{
    //           marginTop: 200,
    //           marginBottom: 200,
    //           marginLeft: 'auto',
    //           marginRight: 'auto',
    //           width: '100%',
    //         }}
    //       />
    //     )
    //   } else if (error) {
    //     return <div>{error}</div>
    //   }
    //   return (
    //       <div className={styles["page-content"]}>
    //      <Row style={{ marginTop: 20 }}>
    //         <Col span={6}>
    //           <SideMunu />
    //         </Col>
    //         <Col span={18}>
    //           <Carousel />
    //         </Col>
    //       </Row>
    //       <ProductCollection
    //         title={
    //           <Typography.Title level={3} type="warning">
    //             {t('home_page.hot_recommended')}
    //           </Typography.Title>
    //         }
    //         sideImage={sideImage}
    //         products={productList[0].touristRoutes}
    //       />
    //       <ProductCollection
    //         title={
    //           <Typography.Title level={3} type="danger">
    //             {t('home_page.new_arrival')}
    //           </Typography.Title>
    //         }
    //         sideImage={sideImage2}
    //         products={productList[1].touristRoutes}
    //       />
    //       <ProductCollection
    //         title={
    //           <Typography.Title level={3} type="success">
    //             {t('home_page.domestic_travel')}
    //           </Typography.Title>
    //         }
    //         sideImage={sideImage3}
    //         products={productList[2].touristRoutes}
    //       />

    //       <Partner />
    //     </div>
  }
}
const mapStateToProps = (state) => {
  return {
    loading: state.Recommend.loading,
    error: state.Recommend.error,
    productList: state.Recommend.productList,
  };
};
const mapDispatchToProps = (dispatch) => {
  return {
    giveMeData: () => {
      dispatch(giveMeDataActionCreator());
    },
  };
};

export const HomePage = connect(
  mapStateToProps,
  mapDispatchToProps
)(withTranslation()(HomePageCmoponent));
